<template>
    <div class="relative">
        <ul class="flex">
            <img class="star-icon" v-for="count in total" :key="count" src="../../assets/dp2/default-star.png" alt="">
        </ul>
        <ul class="active-star">
            <li class="active-li" v-for="count in num" :key="count">
                <div class="num" :style="{width:num==count?width:'100%'}">
                    <img src="../../assets/dp2/active-star.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        total: {
            default: 5
        },
        rate: {
            default: 0
        }
    },
    data() {
        return {
            num: 0,
            width: "100%"
        };
    },
    mounted() {
        this.num = Math.ceil(this.rate);
        if (this.rate % 1) {
            this.width = (this.rate % 1).toFixed(1) * 100 + "%";
        }
    },
    watch: {
        rate: val => {}
    }
};
</script>

<style lang="scss" scoped>
.star-icon {
    margin: 0 6px;
}
.active-star {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    overflow: hidden;
}
.active-li {
    margin: 0 6px;
}
.num {
    overflow: hidden;
}
</style>